<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>居民首页 - 废物回收管理系统</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        .feature-card {
            border: none;
            border-radius: 15px;
            transition: transform 0.3s;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            cursor: pointer;
            overflow: hidden;
        }
        .feature-card:hover {
            transform: translateY(-10px);
        }
        .feature-icon {
            font-size: 2.5rem;
            margin-bottom: 1rem;
            color: #0d6efd;
        }
        .order-card {
            border-radius: 10px;
            margin-bottom: 1rem;
        }
        .map-container {
            height: 300px;
            border-radius: 10px;
            overflow: hidden;
        }
        .category-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
        }
        .category-icon i {
            font-size: 1.5rem;
            color: white;
        }
        .hero-section {
            background: linear-gradient(135deg, #0d6efd, #0099ff);
            color: white;
            padding: 3rem 0;
            margin-bottom: 2rem;
        }
        .notification-badge {
            position: absolute;
            top: -5px;
            right: -5px;
        }
        .status-badge {
            font-size: 0.9rem;
            padding: 0.5rem 1.2rem;
            border-radius: 20px;
            font-weight: 500;
            display: inline-block;
        }
        .status-pending {
            background-color: #fff3cd;
            color: #856404;
            border: 1px solid #ffeeba;
        }
        .status-processing {
            background-color: #cce5ff;
            color: #004085;
            border: 1px solid #b8daff;
        }
        .status-completed {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .status-cancelled {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .order-item {
            transition: transform 0.2s;
        }
        .order-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .nearby-stations {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        .station-list {
            max-height: 600px;
            overflow-y: auto;
        }
        .station-list::-webkit-scrollbar {
            width: 6px;
        }
        .station-list::-webkit-scrollbar-track {
            background: #f1f1f1;
            border-radius: 3px;
        }
        .station-list::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 3px;
        }
        .station-item {
            padding: 1rem;
            border-bottom: 1px solid #eee;
            transition: all 0.3s ease;
        }
        .station-item:last-child {
            border-bottom: none;
        }
        .station-item:hover {
            background-color: #f8f9fa;
            transform: translateY(-2px);
        }
        .station-name {
            color: #2c3e50;
            font-weight: 600;
        }
        .station-distance {
            color: #0d6efd;
            font-size: 0.9rem;
            font-weight: 500;
        }
        .station-details {
            font-size: 0.9rem;
            color: #6c757d;
        }
        .station-details i {
            width: 20px;
            text-align: center;
        }
        .station-actions {
            display: flex;
            gap: 0.5rem;
        }
        .station-actions .btn {
            flex: 1;
            font-size: 0.85rem;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container">
            <a class="navbar-brand" href="#">
                <i class="fas fa-recycle me-2"></i>废物回收管理系统
            </a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link active" href="/resident">
                            <i class="fas fa-home"></i> 首页
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/orders/list">
                            <i class="fas fa-list"></i> 我的订单
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/category/guide">
                            <i class="fas fa-book"></i> 分类指南
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/stations/map">
                            <i class="fas fa-map-marker-alt"></i> 回收点
                        </a>
                    </li>
                </ul>
                <ul class="navbar-nav">
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle position-relative" href="#" id="notificationDropdown" role="button" data-bs-toggle="dropdown">
                            <i class="fas fa-bell"></i>
                            <span class="badge bg-danger notification-badge" th:if="${unreadMessages > 0}" th:text="${unreadMessages}">2</span>
                        </a>
                        <ul class="dropdown-menu dropdown-menu-end">
                            <li><a class="dropdown-item" href="/message/list">查看所有消息</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/profile">
                            <i class="fas fa-user"></i> 个人中心
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/logout">
                            <i class="fas fa-sign-out-alt"></i> 退出登录
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主要内容 -->
    <div class="hero-section">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-md-6">
                    <h1>让回收更简单</h1>
                    <p class="lead">预约上门回收服务，为环保贡献一份力量</p>
                    <a href="/orders/create" class="btn btn-light btn-lg">
                        <i class="fas fa-plus-circle me-2"></i>立即预约
                    </a>
                </div>
                <div class="col-md-6">
                    <img src="/static/images/recycle-hero.png" alt="回收示意图" class="img-fluid">
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <!-- 快捷功能区 -->
        <div class="row mb-4">
            <div class="col-md-3">
                <div class="card feature-card" onclick="location.href='/orders/create'">
                    <div class="card-body text-center">
                        <div class="feature-icon">
                            <i class="fas fa-truck"></i>
                        </div>
                        <h5 class="card-title">预约回收</h5>
                        <p class="card-text">快速预约上门回收服务</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card feature-card" onclick="location.href='/stations/map'">
                    <div class="card-body text-center">
                        <div class="feature-icon">
                            <i class="fas fa-map-marked-alt"></i>
                        </div>
                        <h5 class="card-title">附近回收点</h5>
                        <p class="card-text">查找周边回收站位置</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card feature-card" onclick="location.href='/category/guide'">
                    <div class="card-body text-center">
                        <div class="feature-icon">
                            <i class="fas fa-book-open"></i>
                        </div>
                        <h5 class="card-title">分类指南</h5>
                        <p class="card-text">了解垃圾分类知识</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card feature-card" onclick="location.href='/orders/list'">
                    <div class="card-body text-center">
                        <div class="feature-icon">
                            <i class="fas fa-history"></i>
                        </div>
                        <h5 class="card-title">回收记录</h5>
                        <p class="card-text">查看历史回收订单</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <!-- 最近订单 -->
            <div class="col-md-8">
                <div class="card mb-4">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h5 class="mb-0">最近订单</h5>
                        <a href="/orders/list" class="btn btn-primary btn-sm">查看全部</a>
                    </div>
                    <div class="card-body">
                        <div th:if="${#lists.isEmpty(recentOrders)}" class="text-center py-4">
                            <i class="fas fa-inbox fa-3x text-muted mb-3"></i>
                            <p class="text-muted">暂无订单记录</p>
                            <a href="/orders/create" class="btn btn-primary">
                                <i class="fas fa-plus me-2"></i>立即预约
                            </a>
                        </div>
                        
                        <div th:each="order : ${recentOrders}" class="order-item mb-3 p-3 border rounded">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h6 class="mb-1" th:text="${order.orderNo}">订单号</h6>
                                    <p class="mb-1 text-muted">
                                        <i class="fas fa-map-marker-alt me-2"></i>
                                        <span th:text="${order.address}">回收地址</span>
                                    </p>
                                    <p class="mb-1">
                                        <i class="fas fa-box me-2"></i>
                                        <span th:text="${order.itemType == 'RECYCLABLE' ? '可回收物' : 
                                                      order.itemType == 'HAZARDOUS' ? '有害垃圾' : 
                                                      order.itemType == 'FOOD' ? '厨余垃圾' : '其他垃圾'}">物品类型</span>
                                        <span class="text-muted ms-2" th:text="${order.estimatedWeight + 'kg'}">重量</span>
                                    </p>
                                    <small class="text-muted">
                                        <i class="fas fa-clock me-1"></i>
                                        <span th:text="${#temporals.format(order.createTime, 'yyyy-MM-dd HH:mm')}">创建时间</span>
                                    </small>
                                </div>
                                <div class="text-end">
                                    <span class="status-badge" 
                                          th:classappend="${order.status == 'PENDING' ? 'status-pending' : 
                                                          order.status == 'PROCESSING' ? 'status-processing' : 
                                                          order.status == 'COMPLETED' ? 'status-completed' : 
                                                          order.status == 'CANCELLED' ? 'status-cancelled' : ''}"
                                          th:text="${order.status == 'PENDING' ? '待处理' : 
                                                   order.status == 'PROCESSING' ? '处理中' : 
                                                   order.status == 'COMPLETED' ? '已完成' : 
                                                   order.status == 'CANCELLED' ? '已取消' : order.status}">状态</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 附近回收站 -->
            <div class="col-md-4">
                <div class="nearby-stations">
                    <div class="d-flex justify-content-between align-items-center mb-3">
                        <h5 class="mb-0">附近回收站</h5>
                        <a href="/stations/map" class="btn btn-sm btn-outline-primary">
                            <i class="fas fa-list"></i> 查看全部
                        </a>
                    </div>
                    <div class="station-list">
                        <div class="station-item" th:each="station : ${nearbyStations}">
                            <div class="station-info">
                                <div class="d-flex justify-content-between align-items-start mb-2">
                                    <div class="station-name">
                                        <i class="fas fa-recycle me-2"></i>
                                        <span th:text="${station.name}">回收站名称</span>
                                        <small class="text-primary ms-2" th:if="${station.distance != null}">
                                            <i class="fas fa-location-arrow"></i>
                                            <span th:text="${#numbers.formatDecimal(station.distance, 1, 1) + ' km'}">1.2 km</span>
                                        </small>
                                    </div>
                                    <span class="badge" th:classappend="${station.status == 1 ? 'bg-success' : 'bg-danger'}"
                                          th:text="${station.status == 1 ? '营业中' : '已关闭'}">营业中</span>
                                </div>
                                <div class="station-details mb-2">
                                    <div class="mb-1">
                                        <i class="fas fa-map-marker-alt"></i>
                                        <span th:text="${station.address}">回收站地址</span>
                                    </div>
                                    <div class="mb-1">
                                        <i class="fas fa-phone"></i>
                                        <span th:text="${station.contactPhone}">联系电话</span>
                                    </div>
                                    <div>
                                        <i class="fas fa-clock"></i>
                                        <span th:text="${station.businessHours}">营业时间</span>
                                    </div>
                                </div>
                                <div class="station-actions">
                                    <a th:href="@{/orders/create(stationId=${station.id})}" class="btn btn-sm btn-primary">
                                        <i class="fas fa-plus-circle me-1"></i>预约回收
                                    </a>
                                    <a th:href="@{/stations/{id}(id=${station.id})}" class="btn btn-sm btn-outline-secondary">
                                        <i class="fas fa-info-circle me-1"></i>详情
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div th:if="${#lists.isEmpty(nearbyStations)}" class="text-center py-4 text-muted">
                            <i class="fas fa-info-circle mb-2" style="font-size: 2rem;"></i>
                            <p>暂无营业中的回收站</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 垃圾分类指南 -->
        <div class="row mt-4">
            <div class="col-12">
                <h5 class="mb-3">垃圾分类指南</h5>
            </div>
            <div class="col-md-3">
                <div class="card feature-card" onclick="location.href='/category/guide?type=RECYCLABLE'">
                    <div class="card-body text-center">
                        <div class="category-icon bg-primary">
                            <i class="fas fa-recycle"></i>
                        </div>
                        <h5 class="card-title">可回收物</h5>
                        <p class="card-text text-muted">废纸、塑料、金属、玻璃等</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card feature-card" onclick="location.href='/category/guide?type=HAZARDOUS'">
                    <div class="card-body text-center">
                        <div class="category-icon bg-danger">
                            <i class="fas fa-radiation"></i>
                        </div>
                        <h5 class="card-title">有害垃圾</h5>
                        <p class="card-text text-muted">电池、灯管、药品等</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card feature-card" onclick="location.href='/category/guide?type=FOOD'">
                    <div class="card-body text-center">
                        <div class="category-icon bg-success">
                            <i class="fas fa-apple-alt"></i>
                        </div>
                        <h5 class="card-title">厨余垃圾</h5>
                        <p class="card-text text-muted">剩菜剩饭、果皮等</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="card feature-card" onclick="location.href='/category/guide?type=OTHER'">
                    <div class="card-body text-center">
                        <div class="category-icon bg-secondary">
                            <i class="fas fa-trash"></i>
                        </div>
                        <h5 class="card-title">其他垃圾</h5>
                        <p class="card-text text-muted">难以回收的生活垃圾</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <!-- 引入百度地图API -->
    <script type="text/javascript">
        window.BMAP_PROTOCOL = "https";
        window.BMap_loadScriptTime = (new Date).getTime();
    </script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=mNFuffn83uuKvzWesj3uqfVho6CVP9LI&callback=initMap"></script>
    <!-- 引入地图组件 -->
    <script src="/static/js/map-component.js"></script>
    <script>
        let mapComponent;
        
        // 百度地图API加载完成后的回调函数
        function initMap() {
            console.log('百度地图API加载完成');
            // 初始化地图
            mapComponent = new BaiduMapComponent('nearbyMap', {
                enableGeolocation: true,
                onMapInitialized: function(map) {
                    console.log('地图初始化完成');
                    // 加载附近回收站
                    loadNearbyStations();
                }
            });
            
            mapComponent.init().catch(error => {
                console.error('地图初始化失败:', error);
            });
        }

        // 加载附近回收站
        function loadNearbyStations() {
            $.ajax({
                url: '/api/stations/nearby',
                method: 'GET',
                success: function(response) {
                    if (response && response.code === 200 && Array.isArray(response.data)) {
                        if (response.data.length === 0) {
                            console.log('附近暂无回收站');
                            return;
                        }
                        response.data.forEach(station => {
                            mapComponent.addMarker({
                                position: {
                                    lng: station.longitude,
                                    lat: station.latitude
                                },
                                title: station.name,
                                content: `
                                    <div class="info-window">
                                        <h5>${station.name}</h5>
                                        <p>${station.address}</p>
                                        <p>营业时间: ${station.businessHours}</p>
                                        <p>联系电话: ${station.phone}</p>
                                    </div>
                                `
                            });
                        });
                    } else {
                        console.error('返回的站点数据格式不正确:', response);
                    }
                },
                error: function(xhr, status, error) {
                    console.error('加载站点数据失败:', error);
                }
            });
        }

        function showRoute(lat, lng) {
            // 使用百度地图导航
            const url = `https://api.map.baidu.com/direction?origin=latlng:${userLat},${userLng}|name:我的位置&destination=latlng:${lat},${lng}|name:回收站&mode=driving&region=北京&output=html&src=webapp.recycling`;
            window.open(url);
        }

        // 获取用户位置
        let userLat = 0, userLng = 0;
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(
                (position) => {
                    userLat = position.coords.latitude;
                    userLng = position.coords.longitude;
                },
                (error) => {
                    console.error('获取位置失败:', error);
                }
            );
        }
    </script>
</body>
</html> 